<template>
  <div class="main">
    <div class="header Cgreen">
      <div class="wrapper clearfix">
        <h1>试卷管理系统</h1>
      </div>
    </div>
    <div class="content">
      <div class="wrapper">
        <img class="bg1" src="../assets/bg1.png" />
        <div class="loginBox">
          <div class="logo">系统登录</div>
          <a-form>
            <div class="formDiv">
                <a-form-item>
                  <a-input
                    v-model:value="userName"
                    placeholder="请输入用户名"
                    size="large"
                  >
                    <template #prefix
                      ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
                    /></template>
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-input
                    v-model:value="passowrd"
                    type="password"
                    placeholder="请输入密码"
                    size="large"
                  >
                    <template #prefix
                      ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
                    /></template>
                  </a-input>
                </a-form-item>
              <a-button
                type="primary"
                block
                style="height: 40px;margin-top:20px;font-size:18px;"
                :loading="loading"
                @click="submitCli"
              >
                登 录
              </a-button>
            </div>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watch, onMounted, nextTick, h } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Modal, notification } from "ant-design-vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
const router = useRouter();
const userName = ref("");
const passowrd = ref("");
const loading = ref(false);
const submitCli = () => {
  if (userName.value == "") {
    notification.error({
      message: `温馨提示`,
      description: "请输入账号",
      placement: "topRight",
    });
    return;
  }
  if (passowrd.value == "") {
    notification.error({
      message: `温馨提示`,
      description: "请输入密码",
      placement: "topRight",
    });
    return;
  }
  if (userName.value !== "admin" && passowrd.value !== "123456") {
    notification.error({
      message: `温馨提示`,
      description: "账号和密码错误",
      placement: "topRight",
    });
    return;
  }
  loading.value = true;
  router.push({ path: "/sys" });
  loading.value = false;
};
onMounted(() => {
  // window.onload = function() {
  //     setContentHeight();
  //     window.onresize = setContentHeight;
  //     function setContentHeight () {
  //         let windowHeight = document.documentElement.clientHeight;
  //         document.getElementsByClassName('content')[0].style.height = windowHeight - 102 - 138 + 'px';
  //     }
  // }
});
</script>
<style scoped>
img {
  border: none;
  vertical-align: middle;
}
* {
  box-sizing: border-box;
}

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.clearfix {
  zoom: 1;
}
.Cgreen {
  font-size: 30px;
  background: linear-gradient(to bottom, #fff, #999);
  -webkit-background-clip: text;
  color: transparent;
}
.Cred {
  color: #fa7252;
}
.Cyellow {
  color: #f6b900;
}
.Cblue {
  color: #48c8ff;
}
.hide {
  display: none;
}
input::-webkit-input-placeholder {
  color: #b4b4b4;
  font-weight: 100;
}
input::-moz-placeholder {
  color: #b4b4b4;
  font-weight: 100;
}
input:-moz-placeholder {
  color: #b4b4b4;
  font-weight: 100;
}
input:-ms-input-placeholder {
  color: #b4b4b4;
  font-weight: 100;
}
/* wrapper */
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
/* header */
.header {
  height: 138px;
}
.header h1 {
  font-size: 36px;
  line-height: 138px;
  margin-left: 7px;
  float: left;
}
.header .QRspan {
  float: right;
  margin-top: 90px;
  position: relative;
  color: #4bc6ff;
}
.header .QRspan span {
  color: #646464;
  font-size: 16px;
}
.header .QRspan:hover .QRimg {
  display: inline-block;
  width: 114px;
  height: 114px;
}
.header .QRspan .QRimg {
  position: absolute;
  top: -97px;
  right: 0;
  display: none;
}
/* content */
.content {
  height: 555px;
  background: url("../assets/bg.png") no-repeat,
    -webkit-linear-gradient(-45deg, #48c8ff, #54b7fe);
  background: url("../assets/bg.png") no-repeat,
    -moz-linear-gradient(-135deg, #48c8ff, #54b7fe);
  background: url("../assets/bg.png") no-repeat,
    linear-gradient(-135deg, #48c8ff, #54b7fe);
}
.content .wrapper {
  height: 100%;
  position: relative;
}
.content .wrapper .bg1 {
  position: absolute;
  top: 50%;
  left: -165px;
  margin-top: -214px;
}
.content .wrapper .loginBox {
  width: 408px;
  height: 441px;
  padding: 40px 50px;
  background: #ffffff;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -220px;
}
.content .wrapper .loginBox .logo {
  width: 100%;
  height: 68px;
  color: #1677ff;
  font-size: 28px;
}
.content .wrapper .loginBox .formDiv {
  margin-top: 40px;
  font-size: 16px;
}
.content .wrapper .loginBox .formDiv input[type="text"],
.content .wrapper .loginBox .formDiv input[type="password"] {
  margin-bottom: 20px;
  width: 100%;
  height: 42px;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  box-shadow: 1px 5px 6px 0px rgba(236, 236, 236, 0.5);
  padding: 5px 5px 5px 40px;
  font-size: 16px;
}
.content .wrapper .loginBox .formDiv input[type="text"]:focus,
.content .wrapper .loginBox .formDiv input[type="password"]:focus {
  border-color: #4bc6ff;
}
.content .wrapper .loginBox .formDiv label {
  position: relative;
}
.content .wrapper .loginBox .formDiv label i.iconfont {
  color: #d4dee7;
  font-size: 18px;
  position: absolute;
  top: 0px;
  left: 15px;
}
.content .wrapper .loginBox .formDiv input[type="text"]:focus + i.iconfont,
.content .wrapper .loginBox .formDiv input[type="password"]:focus + i.iconfont {
  color: #4bc6ff;
}
.content .wrapper .loginBox .formDiv .pwdOper {
  font-weight: 300;
  margin-bottom: 30px;
  text-align: right;
}
.content .wrapper .loginBox .formDiv .pwdOper .remember {
  color: #646464;
}
.content
  .wrapper
  .loginBox
  .formDiv
  .pwdOper
  .remember
  input[type="checkbox"]:checked
  + .checkbox:before {
  font-family: iconfont;
  content: "\e732";
  color: #f6b900;
  font-size: 18px;
}
.content .wrapper .loginBox .formDiv .pwdOper .remember .checkbox {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #f6b900;
  border-radius: 2px;
  vertical-align: bottom;
  margin-right: 5px;
}
.content .wrapper .loginBox .formDiv .pwdOper .forget {
  float: right;
}
.content .wrapper .loginBox .formDiv a.submit {
  display: inline-block;
  height: 42px;
  line-height: 42px;
  width: 100%;
  color: #ffffff;
  border: 1px solid #4bc6ff;
  background: #4bc6ff;
  border-radius: 4px;
  text-align: center;
}
.content .wrapper .loginBox .formDiv a.submit:hover {
  background: #4bc6ff;
}
.content .wrapper .loginBox .formDiv a.submit:active {
  background: #4bc6ff;
}
/* footer */
.footer {
  height: 102px;
  line-height: 102px;
  text-align: center;
  font-size: 14px;
  color: #646464;
}
</style>
